<script>
  import List from '../components/list.svelte';
  import Btn from '../components/btn.svelte';
  import QueryBar from '../components/queryBar.svelte';
  import Paging from '../components/paging.svelte';
  import {onMount} from 'svelte';
  import {Post} from '../lib/net.js';
  import {ActiveFreezeUser, AgentListDashboard, AgentList,ModifyVfunds} from '../api.js';
  import Query from '../model/query.js';
  import moment from 'moment';
  let btnText = '上传包'
  let btnHref = "/agent/add/three"
  let data = {
    title: ["编号", "真实姓名", "手机号", "订单类型", "证件号", "买卖数量", "支付渠道", "银行卡账号", "开户银行", "审核状态", "操作"],
    data: []
  }
  let map_agree = ['审核中',"不同意", "同意"];
  let total = 0;
  let agents = 0;
  let users = 0;
  let adminOrUser=false
  var fileUp
  var phone
  // 向列表赛数据，须先定义表头，拿到数据后做title下表映射关系.
  let query = new Query();
  onMount(() => {
    if (localStorage.getItem("uid") == -1) {
      adminOrUser = true
    } else {
      adminOrUser = false
    }
    // getInfo();
    getList();
  });
  window.modifyVFunds = async function(uid) {
    let val = event.target.value;
    await Post(ModifyVfunds,{
      uid: Number(uid),
      amount: val,
    })
    // console.log(uid,123)
  }
  async function getList(e) {
    if (!!e) {
      query.start = e.detail.start
      query.end = e.detail.end
      query.type = 3
    }
    if (query.start==''){
      query.end=''
		}
    query.type = 3
	const otclist = "http://123.56.5.6/otc_list"
    // let ret = await Post('http://123.56.5.6/otc_list', query)
	var httpRequest = new XMLHttpRequest();//第一步：创建需要的对象
	httpRequest.open('POST', otclist, true); //第二步：打开连接/***发送json格式文件必须设置请求头 ；如下 - */
	httpRequest.setRequestHeader("Content-type","application/json");//设置请求头 注：post方式必须设置请求头（在建立连接后设置请求头）
	httpRequest.send(JSON.stringify(query));//发送请求 将json写入send中
	/**
	 * 获取数据后的处理程序
	 */
	httpRequest.onreadystatechange = function () {//请求后的回调接口，可将请求成功后要执行的程序写在其中
	    if (httpRequest.readyState == 4 && httpRequest.status == 200) {//验证请求是否发送成功
	        var ret = httpRequest.responseText;//获取到服务端返回的数据
			ret =JSON.parse(ret)
			query.total = ret.data.count;
			total = ret.data.count;
			let _data = [];
			if (!ret.data.otc_order) ret.data.otc_order = [];
			const user_type=localStorage.getItem("user_type");
			for (let item of ret.data.otc_order) {
				let arrfasong = {
					  id:item.id, 
					  username:item.username,
					  phone:item.phone,
					  idCardNum:item.idCardNum,
					  coinAmount:item.coinAmount,
					  payCardNo:item.payCardNo,
					  payCardBank:item.payCardBank,
					  orderType:2,
					  orderPayChannel:3
					  };
			  let arr = [
				  item.id, 
				  item.username,
				  item.phone,
				  '卖单',
				  item.idCardNum,
				  item.coinAmount,
				  '银行卡',
				  item.payCardNo,
				  item.payCardBank,
				  map_agree[item.status]
				  ];
				  if(item.status==0){
					  arr.push(`<button class="button is-success is-small" data-id=${JSON.stringify(arrfasong)} type="access" on:click> 同意 </button>`)
					  arr.push(`<button class="button is-danger is-small" data-id=${JSON.stringify(arrfasong)} type="failed" on:click>拒绝</button>`)
				  }
			  arr.id = item.id;
			  arr.handler = changeState;
			  _data.push(arr);
			}
			data.data = _data;
	    }
	};
  }
  var isClick = true;
  async function changeState() {
    // await Post(ActiveFreezeUser, {id: Number(id)});
	const otclist = "http://123.56.5.6/otc_list"
	if(isClick) {
		let btn = this.querySelector("button");
		let id = btn.getAttribute("data-id");
		let btnType = btn.getAttribute("type");
		let heihei=JSON.parse(id)
		let qingqiuAgree='http://123.56.5.6/order_test';
		window.location.href="http://123.56.5.6/otc";
		// if (btnType == "access"&&isClick==true) {
		// 	heihei['status'] = 1;
		// 	console.log(heihei)
		// 	let httpRequest = new XMLHttpRequest();
		// 	httpRequest.open('POST', qingqiuAgree, true);
		// 	httpRequest.setRequestHeader("Content-type","application/json");
		// 	httpRequest.send(JSON.stringify(heihei));
		// 	httpRequest.onreadystatechange = function () {
		// 	    if (httpRequest.readyState == 4 && httpRequest.status == 200) {
		// 	        var ret = httpRequest.responseText;
		// 			ret =JSON.parse(ret)
		// 			console.log(ret)
		// 		}
		// 	}
		// } else if(btnType == "failed"&&isClick==true) {
		// 	heihei['status'] = 2;
		// 	console.log(heihei)
		// 	let httpRequest = new XMLHttpRequest();
		// 	httpRequest.open('POST', qingqiuAgree, true);
		// 	httpRequest.setRequestHeader("Content-type","application/json");
		// 	httpRequest.send(JSON.stringify(heihei));
		// 	httpRequest.onreadystatechange = function () {
		// 	    if (httpRequest.readyState == 4 && httpRequest.status == 200) {
		// 	        var ret = httpRequest.responseText;
		// 			ret =JSON.parse(ret)
		// 			console.log(ret)
		// 		}
		// 	}
		// }
		isClick = false;
		getList();
		//定时器
		setTimeout(function() {
			isClick = true;
		}, 1500);//一秒内不能重复点击
		
		
	}
	
  }
  
  async function getInfo() {
    let ret = await Post(AgentListDashboard);
    if (!ret) return

    for (let item of ret) {
      if (item.key === "total") total = item.num;
      if (item.key === "agents") agents = item.num;
      if (item.key === "users") users = item.num;
    }
  }

  function setPage(page) {
    query.page = page;
    getList();
  }
  

 
</script>

<div class="view">
		<div style="display: flex;flex-direction: row;align-items: center;width: 99%;margin: 5px;height: 60px;background-color: white;margin-top: 5px" class="borderRadius4">
        <span style="color: #20222A;margin: 20px">
            卖币管理
        </span>
		</div>
		<!-- <div class="container">
				<QueryBar query={query} on:message={getList}/>
		</div> -->
		<div class="container" style="margin-top:-10px">
				<List data={data}/>
		</div>
		<div class="container rowReverse">
				{#if query.total !== 0}
				<Paging page={query} handler={setPage}/>
						{/if}
		</div>
</div>

<style>
		.borderRadius4 {
				border-radius: 4px;
		}

		.container {
				margin: 20px 5px;
		}

		.info {
				background: #fff;
		}

		.btn {
				line-height: 5px;
				top: 50%;
				transform: translateY(10%);
		}
		
		
        table /deep/  tr td:last-child{
			width: 60px !important;
		}
		
</style>
